<!doctype html>
<html>

<head>
  <title>Asset Management</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
  />
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>
  <header class="header">
    <div class="header-top">
      <div class="containers">
        <div class="left">
          <img src="../../images/tips.png" alt="">
          <span>优品汇售后退还无忧服务上线</span>
        </div>
        <div class="right">
          <a href="./login.html">请先登录&nbsp;&nbsp;| </a>
          <a href="./register.html">&nbsp;&nbsp;免费注册&nbsp;&nbsp;|</a>
          <a href="./myorder.html">&nbsp;&nbsp;我的订单&nbsp;&nbsp;|</a>
          <a href="./helpcenter.html">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
          <a href="">&nbsp;&nbsp;在线客服&nbsp;&nbsp;|</a>
          <a href="">
            <img src="../../images/phone.png" alt="">
            <span>手机版</span>
          </a>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="containers">
        <img src="../../images/logo.png" alt="" class="logo">
        <div class="name">
          <div class="name-top">净水器</div>
          <div class="name-bottom">惠聚优质商品</div>
        </div>
        <ul>
          <li>
            <span class="active">
              <a href="./index.html">首页</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./waterpurifier.html">净水器</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./directlywater.html">直饮水</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./watercheck.html">水质查询</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyinstall.html">申请安装</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyfix.html">申请维修</a>
            </span>
          </li>
        </ul>
        <div style="position: relative;display: inline-block">
          <input type="text" placeholder="输入商品关键词">
          <img src="../../images/search.png" alt="" class="search-img" onclick="window.location.href='./search.html'">
        </div>
        <span class="mycar">我的购物车</span>
        <img src="../../images/bag.png" alt="" class="bag">
      </div>
    </div>
  </header>
  <div class="contents">
    <div class="breadCrumbs">
      <div class="containers">
        首页 > 优选推荐
      </div>
    </div>
    <div class="containers board">
      <div class="board-title dynamic-title">
        <img src="../../images/sanxian.png" alt="">
        <span>申请维修</span>
        <img src="../../images/sanxian.png" alt="">
      </div>
      <div class="small-title">
        编辑精心整理推荐
      </div>

      <div class="product-group flex flex-wrap" id="productList">
        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green" onclick="applyInstall();">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>

        <div class="product-item3">
          <img src="../../images/product2.png" alt="">
          <div class="title">
            卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器卫宁家用净水器直饮大流量中央净水机厨房自来水过滤器
          </div>
          <div class="text-right">
            <span class="btn-green">申请安装</span>
          </div>
        </div>
      </div>
      <div class="apply-form display-none" id="applyForm">
        <div class="board-form-title">
          选择地址查看是否在维修范围
        </div>
        <div class="address-group">
          <div>所在地区</div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择1
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="check">
            查看
          </div>
        </div>
      </div>
    </div>

    <div class="containers board display-none" id="applyForm2">
      <div class="apply-form">
        <div class="board-form-title">
          填写上门维修地址
        </div>
        <div class="time">
          <div>上门时间</div>
          <div class="input-group date time1" id='date1'>
            <input type="text" class="input-group-addon" placeholder="选择日期" />
          </div>
          <input type="text" class="time2" placeholder="10：00-12：00">
        </div>
        <div class="person">
          <div class="input-item">
            <input type="text">
            <span>姓名</span>
          </div>
          <div class="input-item">
            <input type="text">
            <span>手机号</span>
          </div>
        </div>
        <div class="city">
          <input type="text" placeholder="选择省/市/区">
        </div>
        <div class="longInput address-detail">
          <input type="text" placeholder="完善详细地址">
          <span>详情地址</span>
        </div>
        <div class="longInput">
          <input type="text" placeholder="地址标签">
          <span>备注</span>
        </div>

        <div class="button-group">
          <a href="" class="cancel">取消</a>
          <a href="" class="submit">提交申请</a>
        </div>
      </div>
    </div>
  </div>



  <footer class="footer">
    <div class="footer-top containers flex space-between">
      <div class="item">
        <div class="title text-center">客户服务</div>
        <div class="flex space-between">
          <div class="img-group">
            <img src="../../images/serve.png" alt="" class="serve-img">
            <div>在线客服</div>
          </div>
          <div class="img-group">
            <img src="../../images/question.png" alt="" class="qusetion-img">
            <div>问题反馈</div>
          </div>
        </div>
      </div>
      <div class="item">

        <div class="title text-center">关注我们</div>
        <div class="flex space-between">
          <a class="img-group">
            <img src="../../images/wechat.png" alt="" class="weixin-img">
            <div>公众号</div>
          </a>
          <a class="img-group">
            <img src="../../images/webo.png" alt="" class="weibo-img">
            <div>微博</div>
          </a>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="flex space-between">
          <img src="../../images/20170104103647314.png" alt="" class="code">
          <div class="text-group">
            <div>扫描二维码查看</div>
            <div>移动版原型效果</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="green text-center">400-0000-000</div>

        <div class="text-center date">周一至周日：8:00-18:00</div>
        <div class="text-center">(仅收市话费)</div>

      </div>
    </div>
    <div class="footer-bottom">
      <div class="containers advantage flex y-center space-between">
        <div class="item flex y-center">
          <img src="../../images/change.png" alt="">
          <span>30天无忧退换货</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/car.png" alt="">
          <span>满88元免邮费</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/save.png" alt="">
          <span>优品汇品质保证</span>
        </div>
      </div>

      <div class="link containers text-center">
        <a href="">&nbsp;&nbsp;关于我们&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;售后服务&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;配送与验收&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;商务合作&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;企业采购&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;开放平台&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;搜索推荐&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;友情链接&nbsp;&nbsp;</a>
      </div>

      <div class="copyright text-center">
        CopyRight @ 优品汇 2015 - 2017
      </div>
    </div>
  </footer>
  <script>
    $('#date1').datetimepicker({

      format: 'YYYY-MM-DD',
      locale: moment.locale('zh-cn')
    });
    function applyInstall() {
      $('#productList').addClass('display-none');
      $('#applyForm').removeClass('display-none');
      $('#applyForm2').removeClass('display-none');
    }

  </script>
</body>

</html>